<html >
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学生· 我的课程</title>
    <!-- Bootstrap Styles-->
    <link href="../../css/bootstrap/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="../../css/font-awesome.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->

    <!-- Custom Styles-->
    <link href="../../css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <!-- TABLE STYLES-->
    <link href="../../js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
</head>

<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="../student/stu_index.html">题库与考试</a>
        </div>

        <ul class="nav navbar-top-links navbar-right">

            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                    <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li>
                        <a href="../student/stu_person_index.html"><i class="fa fa-user fa-fw"></i> 个人中心</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="../../login.html"><i class="fa fa-sign-out fa-fw"></i> 退出登录</a>
                    </li>
                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>
    </nav>
    <!--/. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <li>
                    <a href="stu_index.html" class="active-menu"><i class="fa fa-dashboard"></i> 我的课程</a>
                </li>
                <li>
                    <a href="stu_test_index.html"><i class="fa fa-desktop"></i> 我的考试</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- /. NAV SIDE  -->
    <div id="page-wrapper">
        <div id="page-inner">
                <h1 class="page-header">
                    我的课程
                </h1>
            <div class="container-fluid">

            <div class="row" id="coursesContainer">

            </div>
                        <!-- 模态框（Modal） -->
                        <!-- 此模态框用于进入我的学习界面，放置所学课程的相关内容 -->
                        <!-- 只是按照大标题小标题的形式层级下调，罗列相关知识点进行学习 -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>
                                    <h4 class="modal-title" id="myModalLabel">
                                        课程知识点
                                    </h4>
                                </div>
                                <div class="modal-body">
                                    <!--此处放置相关知识点学习的内容-->
                                    <ul class="list-group" id="kpointlist">

                                    </ul>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-primary" data-dismiss="modal" style="width: 80px">
                                        退出学习
                                    </button>
                                </div>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->

                </div>
                </div>
            </div>
</div>
        <!-- /. PAGE WRAPPER  -->
        <!-- /. WRAPPER  -->
        <!-- JS Scripts-->
        <!-- jQuery Js -->
        <script src="../../js/jquery-1.10.2.js"></script>
        <!-- Bootstrap Js -->
        <script src="../../js/bootstrap.min.js"></script>
        <!-- Metis Menu Js -->
        <script src="../../js/jquery.metisMenu.js"></script>
        <!-- DATA TABLE SCRIPTS -->
        <script src="../../js/dataTables/jquery.dataTables.js"></script>
        <script src="../../js/dataTables/dataTables.bootstrap.js"></script>
        <script>
            $(document).ready(function() {
                $('#dataTables-example').dataTable();
            });
        </script>
        <!-- Custom Js -->
        <script src="../../js/jquerysession.js"></script>
<script>
    var userid = $.session.get('userid');
    var usertype = $.session.get('usertype');
    console.log(userid);
    // console.log(usertype);
    //判断用户是否登录，以及用户的类型
    if (userid == null){
        alert("请先登录系统");
        window.location.href="/login.html";
    }else if(userid != null){
        //用户类型不是学生
        if (usertype != 2){
            alert("您没有访问该页面的权限");
            window.location.href="/login.html"
        }
    }
    function fillCourses(){
        //获取我的课程并渲染
        $.get("/CourseStudent/findCoursesByStudentid/"+$.session.get('userid'),function(data){
            $.each(data.data,function(index,obj){
                var courseElement =$("<div id='courseClass"+obj.courseid+"' class='courseinfobox well col-md-4'></div>");
                courseElement.append("<p>课程班："+obj.nickname+"</p>");
                courseElement.append("<p>学年："+obj.year+"</p>");
                courseElement.append("<p>学期："+obj.term+"</p>");
                courseElement.append("<p>上课地点："+obj.address+"</p>");

                courseElement.append("<button type='button' id='btn-kp-"+obj.courseid+"' class='btn btn-primary btn-showkpoint pull-right'>查看知识点</button>");

                $("#coursesContainer").append(courseElement);
            });

        });

    }
    function fillKpointToModal(courseid){
        $("#kpointlist").empty();
        $.get("/Kpoint/findAllByCourseid/"+courseid,function (data) {
            console.log(data);
            $.each(data.data, function (index, obj) {
                var kpitem = $("<li></li>");
                $(kpitem).addClass("list-group-item");
                $(kpitem).text(obj.name);
                $("#kpointlist").append(kpitem);
            });
        });
        $("#myModal").modal('show');
    }

    //点击"查看知识点"按钮的事件注册
    $("#coursesContainer").on("click",".btn-showkpoint",function () {
        // console.log($(this));
       fillKpointToModal($(this).attr('id').substring(7));
    });

    fillCourses();

</script>
</body>
</html>